import React, { Component, createElement } from 'react'
import { render } from 'react-dom'
import App from '../App'

let oDiv = createElement('div', {} , '4444444')

console.log(oDiv)


class Home extends Component {
    // constructor() {
    //     super()
    //     this.state = {
    //         num: 100
    //     }
    // }
    state = {
        num: 100,
        list: [1, 2, 3, 4, 5],
        // 数字  字符串
        count: 8888,
        str: 'str',
        // null  布尔值  undefined  
        flag: false,
        myNull: null,
        myUnd: undefined,
        // 数组  自动展开
        arr: [2, 3, 4, 5, [66, 77, 88, [99]]],
        obj: {
            name: "张三"
        }
    }

    add = () => {
        // this.setState  在合成事件中是异步的
        this.setState({
            num: this.state.num += 1
        }) 

        console.log(this.state.num)
    }
    render() {
        // render(生命周期)
        // console.log('执行到render')
        const { list, count, str, flag, myNull, myUnd, arr, obj } = this.state
        return (
            <div>
                {
                    list.map((item, index) => {
                        return <li key = { index }>
                            { item }
                        </li>
                    })
                }

                { [createElement('li', { key: 1} , 'q'), createElement('li', { key: 2} , 'w'), createElement('li', { key: 3} , 'e')] }

                {/* 数字和字符串 */}
                {/* <div>
                    { count } --- { str }
                </div> */}

                {/* 布尔值  null   undefined */}
                {/* { flag }  --- { myNull }   ---  { myUnd } */}
                {/* 数组 */}
                {/* { arr } */}

                {/* 普通对象 */}
                {/* { obj } */}

                {/* react元素 */}
                {/* { oDiv } */}


                <h2>
                    我是类组件 --- {this.state.num}
                </h2>
                {/* react合成事件 */}
                <button onClick={() => {
                    // this.setState修改数据 (1.修改数据  2.重新执行render)
                    // this.setState({ num: 要修改的内容 }, () => {
                    //  数据成功修改以后会执行 
                    // })
                    // this.setState({
                    //     num: this.state.num += 1
                    // }, () => {
                    //     console.log('成功修改')
                    // })
                    this.add()

                    // this.state.num += 1
                    // render(<App/>, document.getElementById('root'), () => {
                    //     console.log('success')
                    // })
                    // console.log(this.state.num)
                }}>+++</button>
                {/* <Home2/> */}
            </div>
        )
    }
}

// class Home2 extends Component {
//     // constructor() {
//     //     super()
//     //     this.state = {
//     //         num: 200
//     //     }
//     // }
//     state = {
//         num: 300
//     }

//     render() {
//         return (
//             <div>
//                 <h2>
//                     我是类组件222 --- { this.state.num }
//                 </h2>
//             </div>
//         )
//     }
// }

export default Home
